<template>
    <div class="body">
        <p class="title">树型结构生成器</p>
        <div class="edit">
            <p>一、请输入结构</p>
            <div class="edit-rendering-box" v-html="editStr">
                <!-- <div class="edit-box">
                    <div class="edit-main">
                        <input type="text" placeholder="请输入节点名称">
                        <div>
                            <button>添加此节点</button>
                            <button>添加子节点</button>
                            <button>删除此节点</button>
                        </div>
                    </div>
                </div> -->
            </div>
            <button @click="toAddNode">添加新节点</button>
        </div>
        <div class="create">
            <p>二、点击生成</p>
            <button @click="toCreateTree()">点击生成树型结构</button>
            <div class="create-rendering-box" v-html="str"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            // list: [
            //     {
            //         title: "你好，这是标题1",
            //         id: "1",
            //         children: [
            //             {
            //                 title: "你好，这是标题1-1",
            //                 id: "1-1",
            //                 children: [
            //                     {
            //                         title: "你好，这是标题1-1-1",
            //                         id: "1-2",
            //                         children: [],
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            //     {
            //         title: "你好，这是标题2",
            //         id: "2",
            //         children: [],
            //     },
            // ],
            str: '',
            editStr: '',
        }
    },
    mounted() {

    },
    methods: {
        // 添加根节点
        toAddNode() {
            let obj = {
                title: "",
                id: (this.list.length + 1).toString(),
                children: [],
            }
            this.list.push(obj)
            this.editStr = ''
            this.editRecursion(this.list)
        },
        // 添加子节点
        toAddChildrenNode(){
            console.log(1);
        },





        // 编辑树形结构递归
        editRecursion(list) {
            for (let i = 0; i < list.length; i++) {
                this.editStr += `
                <div class="edit-box">
                    <div class="edit-main">
                        <input type="text" placeholder="请输入节点名称" v-model=''>
                        <div>
                            <button @click='toAddChildrenNode(${list.id})'>添加子节点</button>
                            <button>删除此节点</button>
                        </div>
                    </div>`
                if (list[i].children) {
                    this.editRecursion(list[i].children)
                }
                this.editStr += `</div>`
            }
        },


        // 生成树型结构按钮
        toCreateTree() {
            if (this.str) {
                this.str = ''
            }
            this.recursion(this.list)
        },
        // 生成树形结构递归
        recursion(list) {
            for (let i = 0; i < list.length; i++) {
                this.str += `
                    <div class="create-box">
                        <div class="create-main">
                            <div>${list[i].id}：${list[i].title}</div>
                            <div>X</div>
                        </div>`
                if (list[i].children) {
                    this.recursion(list[i].children)
                }
                this.str += `</div>`
            }
        },
    },
}
</script>

<style scoped lang="less">
.body {
    font-family: '微软雅黑';
    color: black;
}

.title {
    text-align: center;
    font-size: 30px;
    line-height: 50px;
}

.edit {
    background-color: aqua;
    margin-bottom: 200px;
}

.create {
    // background-color: bisque;
}
</style>
<!-- 全局样式 -->
<style lang="less">
.create-rendering-box {
    margin-right: 40px;

    .create-box {
        margin-left: 40px;
        // background-color: blueviolet;
        margin-top: 10px;
        font-size: 20px;
        line-height: 50px;

        .create-main {
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid black;

        }
    }
}

.edit-rendering-box {
    .edit-box {
        .edit-main {
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>